<template>
    <div class="label" :style="{backgroundColor:labelColor}" @click="searchWay" @mouseenter="live2dAboutChooseWay">
      {{way}}
      <div class="after" :style="{borderLeftColor:afterColor}"></div>
			<div class="top" :style="{borderRightColor:topColor}"></div>
			<!-- <div class="bottom" :style="{borderRightColor:bottomColor}"></div> -->
  </div>
    
</template>

<script>
import Bus from "../bus"
export default {
  props:['way'],
  data(){
    return{
      labelColor:'',
      afterColor:'',
      topColor:'',
      bottomColor:''
    }
  },

  created() {
    this.chooseColor(this.way)
  },
  methods: {
    live2dAboutChooseWay(){
      Bus.$emit("live2dAboutChooseWay",this.way)
    },
    searchWay(){
      if(this.way==="全部"){        
        this.$axios("/blog/alllist").then(res=>{
        if(res.data.error===-1){
          Bus.$emit("searchByWay",res.data.data)
        }else{
          Bus.$emit("searchByWay",[])
        }
        
      })
      }else{
        this.$axios("/blog/alllist",{
        params:{
          way:this.way
        }
      }).then(res=>{
        if(res.data.error===-1){
          Bus.$emit("searchByWay",res.data.data)
        }else{
          Bus.$emit("searchByWay",[])
        }
        
      })
      }
      
    },
    chooseColor(way){
      switch(way){
        case "全部" : this.renderColor("#CA97FE99");break;
        case "vue" : this.renderColor("#41B88399");break;
        case "react" : this.renderColor("#82d7f799");break;
        case "node" : this.renderColor("#026E0099");break;
        case "js" : this.renderColor("#FDD30399");break;
        case "css" : this.renderColor("#0170E699");break;
        case "其他" : this.renderColor("#AB617399");break;
        case "随笔" : this.renderColor("#6a6a6a99");break;
      }
    },
    renderColor(color){
      this.labelColor=color
      this.afterColor=color
      this.topColor=color
      this.bottomColor=color
    }
  },
}
</script>

<style lang="less" scoped>
			.label{
        cursor: url("../assets/img/cur/mais.png"), default;
				position: absolute;
				width: 70px;
        height: 26px;
        text-align: center;
        line-height: 26px;
        font-size: 16px;
        // font-weight: 900;
        // background-color: red;
        transition: all .4s;
        z-index: 5;
        color: #000000;
        font-weight: 500;
        border-top-left-radius: 5px;
        border-bottom-left-radius: 5px;
        &:hover{
          color: #fff;
          transform: translateX(20px);
        }
			}
			.after{
				content: '';
				position: absolute;
        left: 70px;
        top: 0;
				border-top:13px  solid;
				border-left: 13px solid;
				border-bottom: 13px solid;
				border-right: 13px solid;
				border-right-color: transparent !important;
				border-top-color: transparent !important;
				border-bottom-color: transparent !important;
			}
			.top{
				position: absolute;
				left: 60px;
				top: 10px;
        width: 6px;
        height: 6px;
        border-radius: 10px;
        background-color: #fff;
			}
			.bottom{
				position: absolute;
				left: -30px;
				top: 7px;
				border-top:7px  solid;
				border-left: 15px solid;
				border-bottom: 7px solid;
				border-right: 15px solid;
        border-left-color: transparent !important;
				border-top-color: transparent !important;
				border-bottom-color: transparent !important;
        
			}
</style>